<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格样式美化</title>
    <style>
        .table, .table th, .table td {
            border: 1px solid #FF7777;
            /* 收紧单元格之间的边框 */
            border-collapse: collapse;
        }

        /* 单元格，可以设置文字的颜色 */
        .table th,.table td {
            padding: 6px;
            color: #444444;
        }

        /* 隔行效果：奇数行 */
        .table>tbody>tr:nth-child(odd) {
            background-color: #77FF77;
        }

        /* 隔行效果：偶数行 */
        .table>tbody>tr:nth-child(even) {
            background-color: #7777FF;
        }

        /* 鼠标浮动，改变行的背景色 */
        .table>tbody>tr:nth-child(n):hover {
            background-color: #FF00FF;
        }
    </style>
</head>
<body>
    <main>
        <table class="table">
            <caption>成绩表</caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>胡正</td>
                    <td>70</td>
                    <td>80</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>王魏辉</td>
                    <td>80</td>
                    <td>70</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>王彦琪</td>
                    <td>90</td>
                    <td>90</td>
                    <td>90</td>
                </tr>
                <tr>
                    <td>杜明均</td>
                    <td>80</td>
                    <td>80</td>
                    <td>80</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>平均</td>
                    <td>80</td>
                    <td>80</td>
                    <td>90</td>
                </tr>
            </tfoot>
        </table>
    </main>
</body>
</html>